<template>
  <div>
    <!-- header -->
    <div class="header100">
      <div class="header">
        <div class="headerLt">您好，欢迎来到忻州市人民医院！</div>
        <div class="headerRt">
          <a href="">网站首页</a>|
          <a href="/appointment">预约挂号</a>|
          <a href="">登录</a>|
          <a href="">注册</a>
        </div>
      </div>
    </div>
    <!-- headerLogo -->
    <div class="headerLogo100">
      <div class="headerLogo">
        <div class="headerLogoLt">
          <img src="/img/logo.png">
        </div>
        <div class="headerLogoRt">
          <el-input v-model="input" placeholder="请输入搜索内容"></el-input>
          <el-button type="primary">搜索</el-button>
        </div>
      </div>
    </div>
    <!-- Nav -->
    <div class="Nav100">
      <div class="Nav">
        <span><router-link to="/main/index">网站首页</router-link></span>
        <span><a href="">医院概况</a></span>
        <span><router-link to="/specialist">专家简介</router-link></span>
        <span><a href="">医院动态</a></span>
        <span><a href="">特色疗法</a></span>
        <span><router-link to="/case">病例展示</router-link></span>
        <span><a href="">健康护理</a></span>
      </div>
    </div>
    <!-- banner -->
    <div class="banner">
      <!-- 轮播图 -->
      <template>
        <el-carousel indicator-position="outside" height="500px">
          <el-carousel-item v-for="(item,index) in navImg" :key="index">
            <h3><img :src="item" id="img"></h3>
          </el-carousel-item>
        </el-carousel>
      </template>
    </div>
    <!-- 子组件 -->
    <router-view></router-view>
    <!-- 底部 -->
    <div class="footer100">
      <div class="footer">
            <div class="footer-L">
              <div class="img">
                <img src="/img/f1.jpg">
              </div>
              <div class="text">
                <p>山 西 省 忻 州 市 第 壹 人 民 医 院</p>
                <p>shan xi sheng xin zhou shi di yi ren min yi yuan</p>
              </div>
            </div>
            <div class="footer-M"></div>
            <div class="footer-R">
              <p>版权所有© 2019  忻州市人民医院</p>
              <p>健康咨询热线：0350-307191；0350-3066152</p>
              <p>联系地址：山西省忻州市忻府区建设北路88号</p>
              <p>特别声明：本站纯属虚构，如有雷同，纯属巧合</p>
              <p>网站备案：晋ICP备19021175号-1</p>
            </div>
          </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      input:'',
      navImg:['/img/b1.jpg','/img/b2.jpg','/img/b3.jpg','/img/b4.jpg']
    }
  }
}
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
a{
  text-decoration: none;
}
/* header */
.header100{
  width: 100%;
  height: 40px;
  background:skyblue;
}
.header{
  width: 1200px;
  height: 40px;
  margin: 0 auto;
  background:skyblue;
  display: flex;
  justify-content: space-between;
}
.headerLt{
  height: 40px;
  line-height: 40px;
  color: white;
  text-align: center;
  margin-left: 10px;
}
.headerRt{
  width: 300px;
  height: 40px;
  line-height: 40px;
  color: white;
  text-align: center;
}
.headerRt a{
  color: white;
  padding: 0 5px;
}
.headerRt a:hover{
  color: black;
}
/* .headerLog */
.headerLogo100{
  width: 100%;
  height: 100px;
  background-color: white;
}
.headerLogo{
  width: 1200px;
  height: 100px;
  margin: 0 auto;
  background-color: white;
  box-sizing: border-box;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
}
.headerLogoRt{
  height: 60px;
  box-sizing: border-box;
  display: flex;
  padding: 10px 0;
}
.el-button{
  font-size: 14px;
  width: 100px;
}
.Nav100{
  width: 100%;
  height: 60px;
  background:skyblue;
}
/* Nav */
.Nav{
  width: 1200px;
  height: 60px;
  margin: 0 auto;
  background:skyblue;
}
.Nav span{
  display: inline-block;
  margin: 0 20px;
  line-height: 60px;
}
.Nav span a{
  color: white;
}
.Nav span a:hover{
  color: black;
}
/* banner */
.banner{
  width: 100%;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 600px;
  margin: 0;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
} 
.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
/* 子组件 */
.mainSon{
  width: 1200px;
  margin: 0 auto;
}
#img{
  width:100%;
  height:500px;
}
/* footer */
.footer100{
  width: 100%;
  height: 270px;
  background-color: cadetblue;
}
.footer{
  width: 1200px;
  height: 270px;
  box-sizing: border-box;
  padding: 20px 20px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  background-color: cadetblue;
}
.footer-L{
  display: flex;
  align-items: center;
  height: 200px;
}
.footer-L .img img{
  width: 150px;
  height: 150px;
}
.footer-L .text{
  text-align: center;
  margin: 0 10px;
}
.text :first-child{
  color: white;
  font-size: 28px;
}
.text :last-child{
  color: white;
  font-size: 23px;
}
.footer-M{
  height: 180px;
  width: 0;
  box-sizing: border-box;
  border: 1px solid white;
  background-color: white;
}
.footer-R{
  box-sizing: border-box;
  padding: 30px 0;
  height: 200px;
  color: white;
  line-height: 25px;
  margin: 0 10px;
}
</style>